<template>
	<view class="shoppingCart">
		<view class="header">
			<p>已选商品 ({{shoppingCart.length}})</p>
			<p style="color: #acadb2;" @click="clearShoppingCart">
				<van-icon name="delete-o" color="#acadb2"/>
				清空购物车
			</p>
		</view>
		<view class="cart-wrap">
			<block v-for="(it, i) in shoppingCart" :key="it._id">
				<goodsCardVue isShopCart :goods="it" @onChangeGoods="handleChangeGoods($event, i)" />
			</block>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex"
	import goodsCardVue from "./goods-card.vue"
	
	export default {
		name: "shoppingCart",
		computed: {
			...mapGetters(['shoppingCart'])
		},
		components: {goodsCardVue},
		methods: {
			handleChangeGoods(num, i) {
				const goods = this.shoppingCart[i]
				const isSpecification = goods.specification?.length
				if (isSpecification) {
					this.$store.commit('setSpecificationList', [goods, num])
				} else {
					this.$store.commit('changeGoodsNumByGoods', [num, goods])
				}
			},
			async clearShoppingCart() {
				this.$store.commit('clearShoppingCart', this.shoppingCart)
				// ------- 分享订单 商品操作更新
				const {shareOrderTimer, shareIndent} = this.$store.state.order
				if (shareOrderTimer) {
					const res = await uniCloud.callFunction({
						name: 'update-share-order',
						data: {
							indentId: shareIndent.order_form_num._value,
							shoppingCart: []
						}
					})
					console.log('---------', res);
				}
			}
		}
	}
</script>

<style lang="scss">
	.shoppingCart {
		padding: 20rpx;
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ebebeb;
			font-size: 26rpx;
			padding: 30rpx 0;
		}
		
		.cart-wrap {
			overflow-y: scroll;
			height: 600rpx;
			padding-bottom: 160rpx;
		}
	}
</style>